import React, { Component } from 'react';
import { View, Button } from '@tarojs/components';
import { Popup } from '@antmjs/vantui';
import './index.scss'

interface FundPreIPOFilterPro {
    showPopUP: boolean;
    data: Array<any>;
    onClose: Function;
    onSure: Function;
}

class FundPreIPOFilter extends Component<FundPreIPOFilterPro, any> {
    
    config = {
        navigationBarTitleText: ''
    }

    static defaultProps = {
        showPopUP: true,
        data: [],
        onSure: () => { },
        onClose: () => { }
    }

    constructor(props: FundPreIPOFilterPro) {
        super(props);
        this.state = { showPopUP: false };
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const { showPopUP } = nextProps;
        console.log(showPopUP);
        this.state = { showPopUP: showPopUP };
    }

    componentWillMount() { }
    componentDidMount() { }
    componentWillUnmount() { }

    
    onClosee  = (e) => {
        this.setState({ showPopUP: false });
        const { onClose } = this.props;
        onClose();
    }
    
    onReset  = (e) => {
        // this.setState({ showPopUP: false });
        const { onClose } = this.props;
        onClose();
    }

    onSureChange  = (e) => {
        this.setState({ showPopUP: false });
        const { onSure } = this.props;
        onSure();
    }

    render() {
        const { showPopUP } = this.state
        const { data } = this.props

        return (
            <Popup show={showPopUP} position='bottom' onClose={this.onClosee.bind(this)}>
                <View className='fund-popup'>
                    {
                        data.map((item, index) => {
                            return <View className='item'>
                                <View className='item-title'>分类</View>
                                <View className='item-option'>
                                    <Button className='item-option-item' >按钮</Button>
                                    <Button className='item-option-item' >按钮</Button>
                                    <Button className='item-option-item' >按钮</Button>
                                    <Button className='item-option-item' >按钮</Button>
                                </View>
                            </View>
                        })
                    }
                    <View className='bottom'>
                        <Button className='button-item reset-button' onClick={(e) =>this.onReset(e)}>重 置</Button>
                        <Button className='button-item sure-button' onClick={(e) =>this.onSureChange(e)}>确 定</Button>
                    </View>
                </View>

            </Popup>);

    }
}
export default FundPreIPOFilter;